import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import { cancel } from "@/utils/request";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";
import Layout from "@/views/layout";

import componentsRoutes from "./models/components-routes";
import pluginsRoutes from "./models/plugins-routes";
import vueFeaturesRoutes from "./models/vue-features-routes";
Vue.use(VueRouter);
// 指定了相同的webpackChunkName，会合并打包成y一个js文件
// 指定了webpackPreload:true，路由会预加载，会在首屏加载
// 指定了webpackPrefetch:true，路由会按需加载，会在空闲加载, 只有在config.plugins.delete('prefetch')的情况才会使用
const commonRoutes = [
	// {
	// 	path: "/",
	// 	redirect: "/home",
	// },
	{
		path: "/404",
		component: () => import(/* webpackChunkName: '404' */ "@/views/error/404"),
		hidden: true, // 隐藏面包屑
	},
	{
		path: "/401",
		component: () => import(/* webpackChunkName: '401' */ "@/views/error/401"),
		hidden: true,
	},
	{
		path: "/login",
		name: "login",
		component: () => import(/* webpackChunkName: 'login' */ "@/views/login"),
	},
	...componentsRoutes,
	...pluginsRoutes,
	...vueFeaturesRoutes,
	{
		path: "/",
		alias: "/home", // 别名
		component: Layout,
		// redirect: "/home",

		children: [
			{
				path: "",
				name: "Home",
				// meta: { title: '首页', hidden: true },
				meta: {
					title: "首页",
				},
				component: () => import(/* webpackChunkName: 'home' */ "@/views/home"),
			},

			// render
			{
				path: "/render",
				meta: {
					title: "render",
				},
				redirect: {
					name: "jsx",
				},
				component: () =>
					import(
						/* webpackChunkName: 'group-render' */
						"@/views/render/index.vue"
					),
				children: [
					{
						path: "form",
						name: "form",
						meta: {
							title: "form",
						},
						component: () =>
							import(
								/* webpackChunkName: 'group-render' */
								"@/views/render/render_form.vue"
							),
					},
				],
			},

			// 下载
			{
				path: "/download_message",
				name: "download_message",
				meta: {
					title: "下载",
				},

				component: () =>
					import(
						/* webpackChunkName: 'download_message' */
						"@/views/download_message"
					),
			},

			// bpmn
			{
				path: "/bpmn_message",
				name: "bpmn_message",
				component: () =>
					import(
						/* webpackChunkName: 'group-bpmn' */
						"@/views/bpmn_message/index.vue"
					),
				redirect: "/bpmn_message/default_bpmn",
				meta: {
					title: "bpmn",
				},
				children: [
					{
						path: "default_bpmn",
						name: "default_bpmn",
						meta: {
							title: "默认",
						},
						component: () =>
							import(
								/* webpackChunkName: 'group-bpmn' */
								"@/views/bpmn_message/default_bpmn.vue"
							),
					},
					{
						path: "custom_palette_contextPad",
						name: "custom_palette_contextPad",
						meta: {
							title: "自定义palette",
						},
						component: () =>
							import(
								/* webpackChunkName: 'group-bpmn' */
								"@/views/bpmn_message/custom_palette_contextPad.vue"
							),
					},
					{
						path: "custom_palette_contextPad_all",
						name: "custom_palette_contextPad_all",
						meta: {
							title: "完全自定义palette",
						},
						component: () =>
							import(
								/* webpackChunkName: 'group-bpmn' */
								"@/views/bpmn_message/custom_palette_contextPad_all.vue"
							),
					},
					{
						path: "properties-panel-extension",
						name: "properties-panel-extension",
						meta: {
							title: "自定义右侧面板属性",
						},
						component: () =>
							import(
								/* webpackChunkName: 'group-bpmn' */
								"@/views/bpmn_message/properties-panel-extension.vue"
							),
					},
				],
			},
		],
	},
	{
		path: "*",
		name: "*",
		redirect: "/404",
	},
];

const whiteList = ["/login"]; // 不需要token验证的白名单页面

const router = new VueRouter({
	mode: "history",
	routes: commonRoutes,
	base: "/vue3",
});

// 进度条配置项这样写
NProgress.configure({
	showSpinner: true,
});

// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach(async (to, from, next) => {
	NProgress.start();
	cancelToken();

	if (getToken()) {
		if (to.path === "/login") {
			next({ path: "/home" });
			NProgress.done();
		} else {
			// 因为我使用的name跳转，不存在的name路由不会触发重定向，所以此处判断有没有匹配的路由
			if (to.matched.length !== 0) {
				next();
			} else {
				next({
					path: "/404",
				});
			}
		}
	} else {
		if (whiteList.indexOf(to.path) !== -1) {
			next();
		} else {
			next(`/login?redirect=${to.path}`);
			NProgress.done();
		}
	}
});
// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
	NProgress.done();
});

// 路由跳转时取消之前的请求
function cancelToken() {
	cancel.forEach(c => {
		// c.routeChangeCancel && c("路由跳转取消");
		c("路由跳转取消");
	});
	cancel.length = 0;
}
export default router;
